<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
<title>修改个人简介</title>
<style type="text/css">
.form-horizontal {
  margin-bottom: 0;
}
.form-horizontal .control-label {
  width: 60px;
}
.form-horizontal .controls {
  margin-left: 65px;
}
.form-actions {
  margin: 0;
  padding-left: 65px;
}
.form-horizontal textarea {
  width: 95%;
  max-width: 95%;
}
.icon-edit {
  margin-right: 5px;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  display: inline-block;
  cursor: pointer;
}
.icon-edit.hl {
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
}
.icon-edit.disabled {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  cursor: default;
}
.legend_icon {
  margin-top: 15px;
}
.profile_card {
  margin: 10px 0;
}
.profile_card .avatar {
  margin-right: 20px;
}
.profile_card .info {
  position: relative;
}
#profile_card_info_edit_container {
  position: absolute;
  top: 0;
  left: 0;
}
#username {
  line-height: 26px;
  font-size: 24px;
  font-weight: bold;
}
#latest_job {
  line-height: 20px;
  padding: 1px 0;
  color: #333;
  font-size: 16px;
}
#latest_job_edit {
  margin-right: 20px;
}
#hukou {
  line-height: 17px;
  font-size: 13px;
  color: #666;
}
#hukou_edit {
  width: 360px;
}
.edit-section-promo {
  margin-top: 10px;
  margin-bottom: 20px;
  border: 1px dashed #e3e3e3;
  background: #f8f8f8;
}
.edit-section-promo a {
  display: block;
  padding: 20px 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  color: #0077b5;
  text-align: center;
}
.edit-section-promo.disabled a {
  text-decoration: none;
  color: #ccc;
  cursor: default;
}
#experience_edit_start_month, #experience_edit_end_month, #education_edit_start_month, #education_edit_end_month {
  width: 90px;
}
#experience_edit_currently_work_here {
  margin-left: 245px;
}
#experience_edit_headline .control-label {
  width: 147px;
  margin-left: 23px;
}
#experience_edit_headline .controls {
  margin-left: 195px;
}
#summary, #experience, #education {
  padding-bottom: 20px;
}
.cv_summary, .cv_working_experience, .cv_education {
  margin-bottom: 20px;
}
.cv_working_experience h4, .cv_education h4 {
  line-height: 18px;
  margin-top: 0px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  display: inline-block;
}
.cv_working_experience h5, .cv_education h5 {
  line-height: 16px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  color: #000;
  text-decoration: none;
}
#cv_working_experience_list .duration, .cv_education .duration {
  margin-top: 3px;
  margin-bottom: 0px;
  color: #999;
  font-size: 13px;
  line-height: 17px;
}
</style>
<script>
  var educations = $.parseJSON('${cv.curCvLang.educationJson}');
  var experiences = $.parseJSON('${cv.curCvLang.workingExperienceJson}');

  $(function() {
    Tempo.prepare('cv_education_list').append(educations);
    Tempo.prepare('cv_working_experience_list').append(experiences);
    prepareEdit();
  });

  function prepareEdit() {
    $('form').validate();
    initHukouProvinceCitySelect();

    $('.icon-edit').live('mouseenter', function() {
      if (!$(this).hasClass('disabled')) {
        $(this).addClass('hl');
      }
    }).live('mouseleave', function() {
      $(this).removeClass('hl');
    });

    $('#username .icon-edit').click(function() {
      enterEditProfileCard('#username_edit');
    });
    $('#username_edit .btn').click(function() {
      leaveEditProfileCard('#username_edit');
    }).first().click(function() {
      // 保存真实姓名
    });
    $('#latest_job .icon-edit').click(function() {
      enterEditProfileCard('#latest_job_edit');
    });
    $('#latest_job_edit .btn').click(function() {
      leaveEditProfileCard('#latest_job_edit');
    }).first().click(function() {
      // 保存当前工作状态
    });
    $('#hukou .icon-edit').click(function() {
      enterEditProfileCard('#hukou_edit');
    });
    $('#hukou_edit .btn').click(function() {
      leaveEditProfileCard('#hukou_edit');
    }).first().click(function() {
      // 保存户口所在地
    });

    $('#summary .edit-section-promo').click(function() {
      enterEditMode(this, function() {
        $('#summary_edit').show().find('textarea').val('').focus();
      });
    });
    $('#summary .legend_icon').click(function() {
      enterEditMode(this, function() {
        $('#summary_edit').show().find('textarea').val($('.cv_summary').text()).focus();
      });
    });
    $('#summary_edit .btn').click(function() {
      leaveEditMode(this, function() {
        $('#summary_edit').hide();
      });
    }).first().click(function() {
      // 保存概述
    });

    $('#experience .edit-section-promo').click(function() {
      enterEditMode(this, function() {
        $('#experience_edit').insertAfter($('#experience .edit-section-promo')).show().find('input').val('');
        $('#experience_edit select').val('01');
        $('#experience_edit_company').focus();
      });
    });
    $('#experience_edit .btn').click(function() {
      leaveEditMode(this, function() {
        $('#experience_edit').hide();
      });
    }).first().click(function() {
      // 保存工作经历
    });

    $('#experience_edit_currently_work_here :checkbox').change(function() {
      if ($(this).attr('checked')) {
        $('#experience_edit_end_input').hide();
        $('#experience_edit_end_now, #experience_edit_headline').show();
      } else {
        $('#experience_edit_end_input').show();
        $('#experience_edit_end_now, #experience_edit_headline').hide();
      }
    });
    $('#experience_edit_headline :checkbox').change(function() {
      if ($(this).attr('checked')) {
        $('#experience_edit_headline .controls').show();
        $('#experience_edit_headline_input').focus();
      } else {
        $('#experience_edit_headline .controls').hide();
      };
    });
    $('#experience_edit_headline_auto').click(function() {
      var info = [];
      if ($.trim($('#experience_edit_position').val())) {
        info.push($.trim($('#experience_edit_position').val()));
      }
      if ($.trim($('#experience_edit_department').val())) {
        info.push($.trim($('#experience_edit_department').val()));
      }
      if ($.trim($('#experience_edit_company').val())) {
        info.push($.trim($('#experience_edit_company').val()));
      }
      $('#experience_edit_headline_input').val(info.join(' - ')).focus();
    });

    $('.cv_working_experience .icon-edit').click(function() {
      var dom = $(this).parents('[index]');
      var data = experiences[dom.attr('index')];
      enterEditMode(this, function() {
        var $edit = $('#experience_edit').insertAfter(dom).show();
        $('#experience_edit_department').val(data.department);
        $('#experience_edit_position').val(data.position);
        $('#experience_edit_description').val(data.description);
        $('#experience_edit_start_year').val(String(data.startDate).substr(0, 4));
        $('#experience_edit_start_month').val(String(data.startDate).substr(4, 2));
        if (data.endDate) {
          $('#experience_edit_end_year').val(String(data.endDate).substr(0, 4));
          $('#experience_edit_end_month').val(String(data.endDate).substr(4, 2));
        } else {
          $('#experience_edit_headline :checkbox').attr('checked', '').change();
        }
        $('#experience_edit_company').val(data.company).focus();
      });
    });

    $('#education .edit-section-promo').click(function() {
      enterEditMode(this, function() {
        $('#education_edit').insertAfter($('#education .edit-section-promo')).show().find('input').val('');
        $('#education_edit select').val('01');
        $('#education_edit_school').focus();
      });
    });
    $('#education_edit .btn').click(function() {
      leaveEditMode(this, function() {
        $('#education_edit').hide();
      });
    }).first().click(function() {
      // 保存教育经历
    });

    $('.cv_education .icon-edit').live('click', function() {
      var dom = $(this).parents('[index]');
      var data = educations[dom.attr('index')];
      enterEditMode(this, function() {
        var $edit = $('#education_edit').insertAfter(dom).show();
        $('#education_edit_major').val(data.major);
        $('#education_edit_degree').val(data.degreeName);
        $('#education_edit_description').val(data.majorDescription);
        $('#education_edit_start_year').val(String(data.startDate).substr(0, 4));
        $('#education_edit_start_month').val(String(data.startDate).substr(4, 2));
        if (data.endDate) {
          $('#education_edit_end_year').val(String(data.endDate).substr(0, 4));
          $('#education_edit_end_month').val(String(data.endDate).substr(4, 2));
        } else {
          $('#education_edit_headline :checkbox').attr('checked', '').change();
        }
        $('#education_edit_school').val(data.school).focus();
      });
    });
  }

  function enterEditProfileCard(sectionId) {
    enterEditMode(this, function() {
      $('#profile_card_info_edit_container').show();
      $(sectionId).show().find('input:first').focus();
    });
  }

  function leaveEditProfileCard(sectionId) {
    leaveEditMode(this, function() {
      $('#profile_card_info_edit_container').hide();
      $(sectionId).hide();
    });
  }

  function enterEditMode(object, operation) {
    if ($(object).hasClass('disabled')) {
      return;
    }
    $('.icon-edit, .edit-section-promo').addClass('disabled');
    operation();
  }

  function leaveEditMode(object, operation) {
    $('.icon-edit, .edit-section-promo').removeClass('disabled');
    operation();
  }

  function initHukouProvinceCitySelect() {
    $('#hukou_edit_province').change(function() {
      var container = $('#hukou_edit_city_container');
      var cities = $('#hukou_edit_city');
      cities.children('option[value!="0"]').appendTo(container);
      var number = container.children('[value^=' + $(this).val() + ']').appendTo(cities).length;
      cities.children(number === 1 ? ':last' : ':first').attr('selected', '');
    }).children('[value="' + '${memberUser.hukou}'.substr(0, 2) + '"]').attr('selected', '').end().change();
    $('#hukou_edit_city').children('[value="${memberUser.hukou}"]').attr('selected', '');
  }
</script>
</head>

<body>
  <c:if test="${not empty message}">
    <div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
  </c:if>
  <div>
    <div id="basic_info">
      <div>
        <div class="profile_card">
          <div class="avatar pull-left"><img src="${ctx}/static/images/avatar/${memberUser.avatar.imagePath}"></div>
          <div class="info pull-left">
            <div id="username"><i class="icon-edit" title="点击修改姓名"></i>
              <c:if test="${not empty memberUser.realName}">${memberUser.realName}</c:if>
              <c:if test="${empty memberUser.realName}">${memberUser.name}</c:if>
            </div>
            <div id="latest_job"><i class="icon-edit" title="点击修改headline"></i> ${memberUser.headline}</div>
            <div id="hukou"><i class="icon-edit" title="点击修改户口所在地"></i> ${memberUser.residenceName}</div>
            <div id="profile_card_info_edit_container" class="well hide">
              <div id="username_edit" class="hide">
                <form class="form-horizontal">
                <div class="control-group">
                  <label for="username_edit_input" class="control-label">姓名:</label>
                  <div class="controls">
                    <input type="text" id="username_edit_input" name="memberUser.realName" value="${memberUser.realName}" class="input-large required"/>
                  </div>
                </div>
                </form>
                <div class="form-actions">
                  <button type="btn" class="btn btn-primary">确定</button>
                  <button class="btn">取消</button>
                </div>
              </div>
              <div id="latest_job_edit" class="hide">
                <!-- <legend>当前工作情况</legend> -->
                <form class="form-horizontal">
                <div id="edit_headline">
                  <div class="control-group">
                    <label for="edit_headline_input" class="control-label">Headline:</label>
                    <div class="controls">
                      <input type="text" id="edit_headline_input" name="memberUser.headline" value="${memberUser.headline}" class="span5 required"/>
                    </div>
                  </div>
                </div>
                </form>
                <div class="form-actions" data-after-template>
                  <button type="btn" class="btn btn-primary">确定</button>
                  <button class="btn">取消</button>
                </div>
              </div>
              <div id="hukou_edit" class="hide">
                <form class="form-horizontal">
                <div class="control-group">
                  <label for="hukou_edit_province" class="control-label">户口:</label>
                  <div class="controls">
                    <form:select id="hukou_edit_province" path="memberUser.hukou" class="span2">
                      <option value="0">--- 请选择 ---</option>
                      <form:options items="${_provinces}" itemLabel="name" itemValue="id" />
                    </form:select>
                    <select id="hukou_edit_city" class="span2">
                      <option value="0">--- 请选择 ---</option>
                    </select>
                    <form:select id="hukou_edit_city_container" path="memberUser.hukou" items="${_cities}" itemLabel="name" itemValue="id" class="hide"/>
                  </div>
                </div>
                </form>
                <div class="form-actions">
                  <button type="btn" class="btn btn-primary">确定</button>
                  <button class="btn">取消</button>
                </div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <h3 class="hide">最近动态</h3>
    <h3>背景资料</h3>
    <div>
      <div id="summary">
        <legend>概述
          <c:if test="${cv.curCvLang.selfComment ne null}"><i class="icon-edit legend_icon pull-right" title="点击修改概述"></i></c:if>
        </legend>
        <c:if test="${cv.curCvLang.selfComment eq null}">
        <div class="edit-section-promo"><a href="javascript:void(0);">添加概述</a></div>
        </c:if>
        <div id="summary_edit" class="hide">
          <form class="form-horizontal">
          <div class="control-group">
            <label class="control-label" for="summary_edit_textarea">概述:</label>
            <div class="controls">
              <textarea class="input-xlarge" id="summary_edit_textarea" rows="12" cols="60"></textarea>
            </div>
          </div>
          </form>
          <div class="form-actions">
            <button type="btn" class="btn btn-primary">确定</button>
            <button class="btn">取消</button>
          </div>
        </div>
        <div class="cv_summary">${cv.curCvLang.selfComment}</div>
      </div>
      <div id="experience">
        <legend>工作经验</legend>
        <div class="edit-section-promo"><a href="javascript:void(0);">添加工作经验</a></div>
        <div id="experience_edit" class="hide">
          <form class="form-horizontal">
          <div class="control-group">
            <label for="experience_edit_company" class="control-label">公司:</label>
            <div class="controls">
              <input type="text" id="experience_edit_company" class="input-large required"/>
            </div>
          </div>
          <div class="control-group">
            <label for="experience_edit_department" class="control-label">部门:</label>
            <div class="controls">
              <input type="text" id="experience_edit_department" class="input-large"/>
            </div>
          </div>
          <div class="control-group">
            <label for="experience_edit_position" class="control-label">职位:</label>
            <div class="controls">
              <input type="text" id="experience_edit_position" class="input-large required"/>
            </div>
          </div>
          <div class="control-group">
            <label for="" class="control-label">时间:</label>
            <div class="controls">
              <input type="hidden" name="work.startDate" />
              <input type="hidden" name="work.endDate" />
              <input type="text" id="experience_edit_start_year" placeholder="年" class="span1 required"/>
              <select id="experience_edit_start_month">
                <option value="01">一月</option><option value="02">二月</option><option value="03">三月</option><option value="04">四月</option><option value="05">五月</option><option value="06">六月</option><option value="07">七月</option><option value="08">八月</option><option value="09">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option>
              </select>
              到
              <div style="display:inline-block;">
                <div id="experience_edit_end_input">
                  <input type="text" id="experience_edit_end_year" placeholder="年" class="span1 required"/>
                  <select id="experience_edit_end_month">
                    <option value="01">一月</option><option value="02">二月</option><option value="03">三月</option><option value="04">四月</option><option value="05">五月</option><option value="06">六月</option><option value="07">七月</option><option value="08">八月</option><option value="09">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option>
                  </select>
                </div>
                <span id="experience_edit_end_now" class="hide">现在</span>
              </div>
            </div>
            <div id="experience_edit_currently_work_here" class="controls">
              <label class="checkbox">
                <input type="checkbox" value="option1"> 我还在这里工作
              </label>
            </div>
          </div>
          <div id="experience_edit_headline" class="control-group hide">
            <label class="checkbox control-label">
              <input type="checkbox" for="experience_edit_headline_input" value="option1"> 同时更新我的Headline:
            </label>
            <div class="controls hide">
              <input type="text" id="experience_edit_headline_input" class="span5"/>
              <a id="experience_edit_headline_auto" href="javascript:void(0)">自动生成</a>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="experience_edit_description">说明:</label>
            <div class="controls">
              <textarea class="input-xlarge" id="experience_edit_description" rows="12" cols="60"></textarea>
            </div>
          </div>
          </form>
          <div class="form-actions" data-after-template>
            <button type="btn" class="btn btn-primary">确定</button>
            <button class="btn">取消</button>
          </div>
        </div>
        <div id="cv_working_experience_list">
          <div index="{{_tempo.index}}" class="cv_working_experience" data-template>
            <div>
              <h4 class="position">{{position}}</h4>
              <i class="icon-edit" title="点击修改工作经验"></i>
            </div>
            <h5 class="company">{{company}}{%if department%} - {{department}}{%endif%}</h5>
            <div class="duration">{{startDate}} - {%if endDate%}{{endDate}}{%else%}至今{%endif%}</div>
            <div class="description">{{description}}</div>
          </div>
        </div>
      </div>
      <legend class="hide">语言能力</legend>
      <legend class="hide">技能专长</legend>
      <div id="education">
        <legend>教育经历</legend>
        <div class="edit-section-promo"><a href="javascript:void(0);">添加教育经历</a></div>
        <div id="education_edit" class="hide">
          <form class="form-horizontal">
          <div class="control-group">
            <label for="education_edit_school" class="control-label">学校:</label>
            <div class="controls">
              <input type="text" id="education_edit_school" class="input-large required"/>
            </div>
          </div>
          <div class="control-group">
            <label for="education_edit_major" class="control-label">专业:</label>
            <div class="controls">
              <input type="text" id="education_edit_major" class="input-large required"/>
            </div>
          </div>
          <div class="control-group">
            <label for="education_edit_degree" class="control-label">学位:</label>
            <div class="controls">
              <form:select id="education_edit_degree" path="memberUser" class="span2 required">
                <option value="0">--- 请选择 ---</option>
                <form:options items="${_educations}" itemLabel="name" itemValue="id" />
              </form:select>
            </div>
          </div>
          <div class="control-group">
            <label for="" class="control-label">时间:</label>
            <div class="controls">
              <input type="hidden" name="work.startDate" />
              <input type="hidden" name="work.endDate" />
              <input type="text" id="education_edit_start_year" placeholder="年" class="span1 required"/>
              <select id="education_edit_start_month">
                <option value="01">一月</option><option value="02">二月</option><option value="03">三月</option><option value="04">四月</option><option value="05">五月</option><option value="06">六月</option><option value="07">七月</option><option value="08">八月</option><option value="09">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option>
              </select>
              到
              <div style="display:inline-block;">
                <div id="education_edit_end_input">
                  <input type="text" id="education_edit_end_year" placeholder="年" class="span1 required"/>
                  <select id="education_edit_end_month">
                    <option value="01">一月</option><option value="02">二月</option><option value="03">三月</option><option value="04">四月</option><option value="05">五月</option><option value="06">六月</option><option value="07">七月</option><option value="08">八月</option><option value="09">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option>
                  </select>
                </div>
                <span id="education_edit_end_now" class="hide">现在</span>
              </div>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="education_edit_description">说明:</label>
            <div class="controls">
              <textarea class="input-xlarge" id="education_edit_description" rows="12" cols="60"></textarea>
            </div>
          </div>
          </form>
          <div class="form-actions" data-after-template>
            <button type="btn" class="btn btn-primary">确定</button>
            <button class="btn">取消</button>
          </div>
        </div>
        <div id="cv_education_list">
          <div index="{{_tempo.index}}" class="cv_education" data-template>
            <div>
              <h4 class="school">{{school}}</h4>
              <i class="icon-edit" title="点击修改教育经历"></i>
            </div>
            <h5 class="major_degree">{%if major%}{{major}}，{%endif%}{{degreeName}}</h5>
            <div class="duration">{{startDate}} - {%if endDate%}{{endDate}}{%else%}至今{%endif%}</div>
            <div class="description">{{majorDescription}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="edit_profile_modal" class="modal hide fade">
    <div class="modal-header">
      <div class="row">
        <div class="pull-right">
        <a href="#" class="btn btn-primary" id="select_industry_modal_ok">确定</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal">取消</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
